<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tab{
            width:600px; height:300px; 
            border: 1px solid #000;  
            border-spacing: 0;
            table-layout: fixed;
            /* border-collapse: collapse; */
            empty-cells: show;
            text-align: center;
            margin: 0 auto;   
        }
       
        .tab td,.tab th{
            border: 1px solid #000;  
            /* vertical-align: top; */
        }

        /* 
        css属性 记
         border-spacing 单元格和单元格之间的间距 table加
         table-layout 单元格宽度是否固定 auto fixed
         border-collapse 合并相邻单元格边框  separate 边框分开（不合并） collapse 边框合并


         标签 
            行分组 记
                thead 表头 一个
                tbody 表体  多个表体 必有
                tfoot 表尾 一个
            记
            <th></th> 列的标题 加在tr里 文字会加粗，并且水平居中

           <caption></caption> 表格的标题
        */
        thead{
            background: pink;
        }
        caption{
            background: blue;
            caption-side: top;
        }
    </style>
</head>
<body>
   <table class="tab">
       <caption>通讯录</caption>
       <thead>
           <tr>
               <th>姓名</th>
               <th>年龄</th>
               <th>工龄</th>
           </tr>
       </thead>
       <tbody>
        <tr>
            <td>雪在烧国雪在烧雪在烧佛大魂牵梦萦为魂牵梦萦为城区</td>
            <td></td>
            <td>3</td>
        </tr>
        <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
        <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
        <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tfoot>
   </table>
</body>
</html>